<template>
  <div class="container">
    <div class="center">
      <div class="syfl">
        <span>所有分类</span>
        <span>></span>
        <span>{{$route.query.busclass}}</span>
      </div>
      <div class="fl">
        <span>分类</span>
        <ul>
          <li @click="fenlei('全部')" :class="{active:activs=='全部'}">全部</li>
          <li v-for="item in serveTypes" :key="item.scid" @click="fenlei(item.vwork)" :class="{active:activs==item.vwork}">{{item.vwork}}</li>
        </ul>
      </div>
      <div class="second-part">
        <div class="left">
          <div class="tjpx">
            <ul>
              <li @click="fenlei(activs)">推荐排序</li>
              <li class="active" @click="bysales">销量高</li>
              <li @click="byreput">好评多</li>
              <li @click="byvisit">上门快</li>
              <li @click="byspice">价格低</li>
            </ul>
            <div class="page">
              <span>1</span>/<span>1</span>
              <span>上一页</span>
              <span>下一页</span>
            </div>
          </div>
          <!-- 引入服务列表组件 -->
          <fwlblist v-for="item in serveList" :key="item.sdid" :serveInfo='item'></fwlblist>
        </div>
        
        <div class="right">
          <h3>服务商</h3>
          <FuWuShang v-for="item in fwsList" :key="item.meid" :fwsInfo="item"></FuWuShang>
        </div>
      </div> 
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive,ref} from 'vue'
import FuWuShang from '@/components/FuWuShang.vue';
import Fwlblist from '@/components/Fwlblist.vue';
import httpApi from '@/http';
import { useRoute } from 'vue-router';
import sdList from '@/types/fwList'
import FwsList from '@/types/fws'
import Redetalis from '@/types/serveDetailType'

let route = useRoute()

let busclass = route.query.busclass
let swork = route.query.vwork

let activs = ref()
activs.value = swork
console.log(activs);
//通过服务类型名称获取详细服务
const serveList = ref<sdList[]>([])
httpApi.serveApi.queryserveByst({page:1,pagesize:5,busclass,swork}).then(res=>{
  console.log(res);

  serveList.value=res.data.data  
})

function fenlei(swork){
  httpApi.serveApi.queryserveByst({page:1,pagesize:5,busclass,swork}).then(res=>{
  serveList.value = res.data.data  
  activs.value = swork
})
}

// httpApi.serveApi.queryServeByXl({page:1,pagesize:5,busclass:type}).then(res=>{
//   serveList.push(...res.data.data) 
// })

//通过服务类型名称获取详细服务分类
const serveTypes = reactive<Redetalis[]>([])
httpApi.serveApi.queryByServeName({busclass}).then(res=>{
//console.log(res);
  serveTypes.push(...res.data.data)
})

//获取服务商
const fwsList = reactive<FwsList[]>([])
httpApi.fwsApi.queryFws().then(res=>{
  //console.log(res);
  fwsList.push(...res.data.data.splice(3,5))
})

function bysales(){
  let swork = activs.value
  httpApi.serveApi.queryServeByXl({page:1,pagesize:5,busclass,swork}).then((result) => {
    serveList.value = result.data.data
  })
}

function byreput(){
  let swork = activs.value
  httpApi.serveApi.queryServeByHP({page:1,pagesize:5,busclass,swork}).then((result) => {
    serveList.value = result.data.data
  })
}

function byvisit(){
  let swork = activs.value
  httpApi.serveApi.queryServeBySM({page:1,pagesize:5,busclass,swork}).then((result) => {
    serveList.value = result.data.data
  })
}

function byspice(){
  let swork = activs.value
  httpApi.serveApi.queryServeByJG({page:1,pagesize:5,busclass,swork}).then((result) => {
    serveList.value = result.data.data
  })
}

</script>

<style scoped lang="scss">
.container{
  background-color: #F8F8F8;
  .center{
    .syfl{
      padding: 30px 0;
      span{
        font-size: 18px;
        font-weight: bold;
        padding-right: 15px;
         &:nth-child(3){
          color: #FF3B45;
          cursor: pointer;
        }
      } 
    }
    .fl{
      height: 50px;
      display: flex;
      align-items: center;
      border: 1px solid #EAEAEA;
      padding:0 60px;
      background-color: #fff;
      span{
        color: #666;
      }
      ul{
        display: flex;
        margin-left: 40px;
        li{
          width: 100PX;
          text-align: center;
          cursor: pointer;
          &:hover{
            color: #FF3B45;
          }
          &:nth-child(1){
            width: 60px;            
          }
          &.active{
            color: #FF3B45;
            font-weight: bold;
          }
        }
      }
    }
    .second-part{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .left{
        width: 80%;
        background-color: #fff;
       
        .tjpx{
          position: relative;
          display: flex;
          padding: 0 0 0 20px;
           border: 1px solid #EAEAEA;
          border-bottom: none;
          .tjpx-left{
            display: inline-block;
              padding: 20px 0 0 0;
              cursor: pointer;
              height: 42px;
          } 
          
          ul{
            display: flex;
            padding: 20px;
            li{
              padding: 0 30px 20px;
              cursor: pointer;
              background-image: url(../../assets/icon/fuwu_down2.jpg);
              background-repeat: no-repeat;
              background-position: 83px 8px;
              &.active{
                color: #FF3B45;
                border-bottom: 4px solid #FF3B45;
              } 
            }
          }
          .page{
            position: absolute;
            right: 10px;
            padding: 15px 0;
            span{
              font-size: 14px;
              display: inline-block;
              &:nth-child(1){
                color: #FF3B45;
              }
              &:nth-child(3){
                margin: 0 22px 0 10px;
                padding: 5px 15px;
                border: 1px solid #E5E5E5;
              }
              &:nth-child(4){
                padding: 5px 15px;
                border: 1px solid #E5E5E5;
              }
            }
          }
        }
      }
      .right{
        width: 19%;
        background-color: #fff;
        border: 1px solid #EAEAEA;
        h3{
          padding: 20px 10px;
          border-bottom: 1px solid #E5E5E5;
        }
      }
    }
  }
}

</style>